<template>
	<view class="g-h5 body-content">
		<view class="search-view">
			<u-search placeholder="快速查找" :show-action="false" bg-color="#DFE0E4"></u-search>
		</view>
		<view class="user-list-title">信息收集</view>
		<view class="user-list-view">
			<view class="item-view" @tap.stop="goView('/pages/miniprogram/collect')">
				<view class="list-top">
					<view><u-icon name="photo"></u-icon></view>
					<view class="top-num">83</view>
				</view>
				<view class="list-name-text">收集箱</view>
			</view>
			<view class="item-view" @tap.stop="goView('/pages/miniprogram/time')">
				<view class="list-top">
					<view><u-icon name="photo"></u-icon></view>
					<view class="top-num">83</view>
				</view>
				<view class="list-name-text">今天</view>
			</view>
			<view class="item-view" @tap.stop="goView('/pages/miniprogram/label')">
				<view class="list-top">
					<view><u-icon name="photo"></u-icon></view>
					<view class="top-num">83</view>
				</view>
				<view class="list-name-text">分类</view>
			</view>
			<view class="item-view" @tap.stop="goView('/pages/miniprogram/remark')">
				<view class="list-top">
					<view><u-icon name="photo"></u-icon></view>
					<view class="top-num">83</view>
				</view>
				<view class="list-name-text">标注</view>
			</view>
		</view>
		<view class="user-menu-view">
			<view class="user-menu-list">
				<view class="user-menu-list-top">
					<view class="user-menu-list-text">智能列表</view>
					<view><u-icon name="arrow-down"></u-icon></view>
				</view>
				<view><u-icon name="plus-circle" size="34" color="#999"></u-icon></view>
			</view>
			<view class="user-menu-content">
				<view class="menu-content-list" @tap.stop="goView('/pages/miniprogram/memory')">
					<view class="menu-left-view">
						<view><u-icon name="photo" size="36"></u-icon></view>
						<view style="margin-left: 20rpx;">记忆</view>
					</view>
					<view><u-icon name="arrow-right" color="#999"></u-icon></view>
				</view>
				<view class="menu-content-list"  @tap.stop="goView('/pages/miniprogram/afflatus')">
					<view class="menu-left-view">
						<view><u-icon name="photo" size="36"></u-icon></view>
						<view style="margin-left: 20rpx;">灵感</view>
					</view>
					<view><u-icon name="arrow-right" color="#999"></u-icon></view>
				</view>
				<!-- <view class="menu-content-list"  @tap.stop="goView('/pages/miniprogram/note')">
					<view class="menu-left-view">
						<view><u-icon name="photo" size="36"></u-icon></view>
						<view style="margin-left: 20rpx;">创作笔记</view>
					</view>
					<view><u-icon name="arrow-right" color="#999"></u-icon></view>
				</view> -->
				
				<!-- <u-sticky>
					<u-tabs-swiper ref="tabs" name="cate_name" :list="tabsList" :is-scroll="false" @change="tabsChange"
						:current="tabsCurrent"></u-tabs-swiper>
				</u-sticky>
				
				<view class="label-content-view">
					<view class="user-menu-list1">
						<view class="remark-content-view" v-for="(item,index1) in noteList" :key="index1">
							<view class="remark-list-top">
								<view class="remark-text-view">
									<view class="remark-title">{{item.content}}</view>
								</view>
								<image class="remark-image" :src="item.image" mode=""></image>
							</view>
							<view class="remark-book-bottom">
								<view class="remark-import-text" v-if="item.status == 1">今日未完成</view>
								<view class="remark-import-text" v-else-if="item.status == 2">已完成</view>
								<view class="remark-import-text" v-else-if="item.status == 3">已分享</view>
								<view><u-icon name="coupon-fill" size="38"></u-icon></view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="user-list-title">创作笔记</view>
		<view class="user-list-view">
			<view class="item-view" @tap.stop="goView('/pages/miniprogram/note')">
				<view class="list-top">
					<view><u-icon name="photo"></u-icon></view>
					<view class="top-num">20</view>
				</view>
				<view class="list-name-text">所有笔记</view>
			</view>
			<view class="item-view">
				<view class="list-top">
					<view><u-icon name="photo"></u-icon></view>
					<view class="top-num">20</view>
				</view>
				<view class="list-name-text">今日草稿</view>
			</view>
			<view class="item-view">
				<view class="list-top">
					<view><u-icon name="photo"></u-icon></view>
					<view class="top-num">20</view>
				</view>
				<view class="list-name-text">已完成</view>
			</view>
			<view class="item-view">
				<view class="list-top">
					<view><u-icon name="photo"></u-icon></view>
					<view class="top-num">20</view>
				</view>
				<view class="list-name-text">已分享</view>
			</view>
		</view>
		<u-tabbar v-model="current" :list="list"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: [{
						iconPath: 'home',
						selectedIconPath: 'home-fill',
						text: '在读',
						customIcon: false,
						pagePath: '/pages/miniprogram/index'
									},
					{
						iconPath: 'photo',
						selectedIconPath: 'photo-fill',
						text: '书架',
						customIcon: false,
						pagePath: '/pages/miniprogram/books'
									},
					{
						iconPath: 'https://cdn.uviewui.com/uview/common/min_button.png',
						selectedIconPath: 'https://cdn.uviewui.com/uview/common/min_button_select.png',
						text: '书店',
						customIcon: false,
						pagePath: '/pages/miniprogram/bookshop'
									},
					{
						iconPath: 'play-right',
						selectedIconPath: 'play-right-fill',
						text: '我的',
						customIcon: false,
						pagePath: '/pages/miniprogram/user'
									},
								],
				current: 3,
				tabsList: [{ cate_name: '所有笔记' }, { cate_name: '今天草稿' }, { cate_name: '已完成' }, { cate_name: '已分享' }],
				swiperCurrent: 0,
				tabsCurrent: 0,
				noteList: []
			}
		},
		onLoad() {
			this.noteList = this.$api.noteList()
		},
		methods: {
			goView(view){
				uni.navigateTo({ url:view })
			},
			tabsChange(index) {
				this.tabsCurrent = index
				this.swiperCurrent = index
			},
			animationfinish(e) {
				let current = e.detail.current
				this.swiperCurrent = current
				this.tabsCurrent = current
			},
			goNote(item){
				uni.navigateTo({ url:'/pages/miniprogram/addnote?data=' + JSON.stringify(item) })
			}
		}
	}
</script>

<style scoped>
	.search-view {
		padding: 30rpx 40rpx;
	}
	.user-list-view {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20rpx 40rpx;
	}
	.item-view {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		width: 320rpx;
		margin-top: 30rpx;
	}
	.list-top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}
	.user-menu-view {
		padding: 20rpx 40rpx;
	}
	.user-menu-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.user-menu-list-top {
		display: flex;
		color: #999;
		font-size: 24rpx;
	}
	.user-menu-content {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	.menu-content-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1rpx solid #ECEDF1;
	}
	.menu-left-view {
		display: flex;
		align-items: center;
	}
	.label-content-view {
		padding: 0 40rpx;
	}
	
	.label-list {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx;
	}
	
	.label-list-view {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #999999;
	}
	
	.label-list-view:last-child {
		border-bottom: none;
	}
	
	.label-left-view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	
	.label-right-view {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}
	
	.user-menu-list1 {
		margin-top: 20rpx;
	}
	
	.remark-content-view {
		border-radius: 20rpx;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}
	
	.remark-list-top {
		display: flex;
		justify-content: space-between;
	}
	
	.remark-title {
		font-size: 30rpx;
		width: 480rpx;
		/* white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; */
	}
	
	.remark-text {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
		width: 480rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.remark-image {
		width: 120rpx;
		height: 120rpx;
	}
	
	.remark-book-bottom {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.remark-import-text {
		padding: 4rpx 12rpx;
		background-color: #F7E598;
		font-size: 24rpx;
		border-radius: 6rpx;
	}
	.user-list-title {
		font-weight: 600;
		font-size: 32rpx;
		margin-top: 20rpx;
		padding-left: 40rpx;
	}
</style>